iT邦幫忙

2024 iThome 鐵人賽
DAY 2
0
JavaScript

【分享】JavaScript 30 新手仔刷題系列 第 3 篇

關於 Javascript 30天[Day2 CSS + JS Clock]

16th鐵人賽
37 瀏覽

  • 分享至 

  • xImage
    •  

今日重點

如何抓計算時間
取得取得時間後如何計算
取得計算後setInterval 每秒重新刷新
調整CSS 讓秒,分,時回歸原位

今日所練習到的部分

querySelect 抓許取相對應的dom
抓到後取得現在時時間
取得時間後用圓去計算秒,分,時位置

我們來實作吧

我們用LiveService 點開來會先看到以下畫面
https://ithelp.ithome.com.tw/upload/images/20240915/20162790oLB7wjkDDP.png

成功時我們要讓時鐘動起來
https://ithelp.ithome.com.tw/upload/images/20240915/20162790htP4yhj7AK.png

第一步我們先獲取dom元素
https://ithelp.ithome.com.tw/upload/images/20240915/201627907DILBNmlba.png

第二獲取現在的時間
https://ithelp.ithome.com.tw/upload/images/20240915/20162790sj04mxosHH.png

第三抓用現在時間取得現在秒,分,時
https://ithelp.ithome.com.tw/upload/images/20240915/201627909eHXW9xGy1.png

第四計算圓的角度及秒數
https://ithelp.ithome.com.tw/upload/images/20240915/20162790qIZnqhdq0z.png

第五setInterval 每秒重新刷新
https://ithelp.ithome.com.tw/upload/images/20240916/20162790xa9UAfGRnl.png

第六重新調整CSS
https://ithelp.ithome.com.tw/upload/images/20240916/20162790Kpp9NA04VJ.png

https://ithelp.ithome.com.tw/upload/images/20240916/20162790rYNfYBzsni.png

最後就大公告成啦！！

練習心得
可惡第二天來不及完成，但我還是會繼續把30天寫完！！


上一篇
關於 Javascript 30天[Day1 Drum-Kit]
系列文
【分享】JavaScript 30 新手仔刷題 共 3 篇
  1. 1
    關於 Javascript 30天 自我目標
  2. 2
    關於 Javascript 30天[Day1 Drum-Kit]
  3. 3
    關於 Javascript 30天[Day2 CSS + JS Clock]
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1050 組
團體組數
40 組
累計文章數
17811 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙